<template>
  <div class="numControl">
    <span class="decrease" @click="decrease">-</span>
    <input class="count" v-model="goodNum" placeholder="" disabled="disabled" type="number" @blur="changeNum" onkeyup="this.value=this.value.replace(/[^\d]/g,'')"/>
    <span class="add" @click="add">+</span>
  </div>
</template>

<script>
    export default {
      name: 'numControl',
      data() {
        return {
          goodNum: this.good.num
        };
      },
      props: {
        good: {
          type: Object
        },
        index1: {
          type: Number
        },
      index2: {
        type: Number
      },
        region: {
          type: String
        },
        num: {
          type: Number
        }
      },
      methods: {
        add() {
          let data = {};
          this.goodNum++;
          this.$set(data, 'productId', this.good.product.id);
          this.$set(data, 'region', this.region);
          this.$set(data, 'normId', this.good.product.norm_id);
          this.$Sale.cart('add', data).then(res => {
            let msg = {
              num: this.goodNum,
             index1: this.index1,
              index2: this.index2
            };
            this.$emit('changeNum', msg);
          });
        },
        decrease() {
          if (this.goodNum <= 1) {
            this.goodNum = 1;
          } else {
            let data = {};
            this.goodNum--;
            this.$set(data, 'productId', this.good.product.id);
            this.$set(data, 'region', this.region);
            this.$set(data, 'normId', this.good.product.norm_id);
            this.$Sale.cart('dec', data).then(res => {
              let msg = {
                num: this.goodNum,
                index1: this.index1,
                index2: this.index2
              };
              this.$emit('changeNum', msg);
            });
          }
        },
        changeNum() {
          let data = {};
          this.$set(data, 'productId', this.good.product.id);
          this.$set(data, 'region', this.region);
          this.$set(data, 'normId', this.good.product.norm_id);
          this.$Sale.cart('dec', data).then(res => {
            let msg = {
              num: this.goodNum,
              index1: this.index1,
              index2: this.index2
            };
            this.$emit('changeNum', msg);
          });
        }
      },
      watch: {
        num(val) {
          this.goodNum = val;
        }
      },
      beforeCreate() {
          // 可以在这加个loading事件，在加载实例时触发
          // 这个阶段实例的data、methods是读不到的
      },
      created() {
          // 初始化数据，如在这结束loading事件，异步ajax请求也适宜在这里调用
          // 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。
          // mount挂载阶段还没开始，"el" 属性目前不可见，数据并没有在DOM元素上进行渲染
      },
      beforeMount() {
          // 相关的 render 函数首次被调用。
      },
      mounted() {
          // 挂载元素，获取到DOM节点
          // el选项的DOM节点 被新创建的 vm的el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
      },
      beforeUpdate() {
          // 数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
      },
      updated() {
          //  如果对数据统一处理，在这里写上相应函数
          // 这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行
      },
      beforeDestroy() {
          // 可以做一个确认停止事件的确认框
      },
      destroyed() {
          // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
      }
    };

</script>

<style scoped lang="stylus">
  @import "../../assets/stylus/main.styl"
  .numControl
    display flex
    .count
      width: 10vw;
      text-align: center;
      height: vw(20);
      line-height vw(20)
      box-sizing: border-box;
      margin: 0 1vw;
      outline: none;
      background-color: transparent;
    span
      font-size 4.3vw
      width vw(20)
      text-align center
      line-height vw(20)
      height vw(20)
      border-radius vw(5)
      box-sizing border-box
    .add
      color main-color
      border 1px solid main-color
      background-color transparent
    .decrease
      color #c9c9c9
      border 1px solid #c9c9c9
</style>
